<template>
  <!-- 会员卡介绍 -->
  <div class="details">
    <mt-header fixed title="会员卡介绍">
      <router-link to slot="left">
        <mt-button icon="back" v-if="iosShow" @click="$router.go(-1)"
          >返回</mt-button
        >
      </router-link>
    </mt-header>
    <div class="details_top">
      <img src="../../../static/image/currentduan.png" class="back" />
      <div class="details_nav">
        <div>
          <img src="../../../static/image/logotwo.png" />
        </div>
        <div>税东家(国际)税务商学院</div>
      </div>
    </div>
    <div class="details_oitem">
      <div class="details_txt">{{ name }}</div>
      <div class="details_two">
        <span>简介</span>
        <span>{{ info }}</span>
      </div>
    </div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">详情</mt-tab-item>
      <mt-tab-item id="2">权益</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div class="rich_text" v-html="content">{{ content }}</div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <ul>
          <li
            v-for="(item, index) in specialList"
            :key="index"
            @click="tiao(item)"
          >
            <div class="li_left">
              <p>{{ item.name }}</p>
              <p>{{ item.content }}</p>
            </div>
            <img src="../../../static/image/arrows.png" alt />
          </li>
        </ul>
      </mt-tab-container-item>
    </mt-tab-container>
    <div class="bottom" v-if="isBuy == 1">
      <button class="subscription">已订阅</button>
    </div>
    <div class="bottom" v-else>
      <button class="subscription" @click="Paymoney()">
        订阅
        <span>￥{{ price }}</span>
      </button>
    </div>
  </div>
</template>
<script>
import { cardDetail, Reqpay, Sdksig, codeh5, wxLogin } from "../../api/api";
import querystring from "query-string";

import {
  Header,
  Indicator,
  Toast,
  Navbar,
  TabItem,
  InfiniteScroll,
} from "mint-ui";

export default {
  name: "Member",
  data() {
    return {
      selected: "1",
      memberId: "",
      name: "",
      info: "",
      content: "",
      specialList: [],
      price: "",
      isBuy: "",
      iosShow: false,
      imgUrl: "",
      nowtime: "",
      pwd: "",
      queryList: "",
    };
  },
  created() {
    this.memberId = this.$route.query.memberId;
    this.Phonetype();
    this.randomString();
    this.getTime();
  },
  mounted() {
    if (localStorage.getItem("token")) {
      this.cardDetail();
    } else {
      this.queryList = this.$route.query;
      let href = window.location.href;
      if (href.includes("/?code")) {
        let sp1 = href.split("/?code=");
        let code = sp1[1].split("&")[0];
        this.CodeH(code);
      } else {
        this.Codeshare();
      }
    }
  },
  methods: {
    //会员卡详情
    cardDetail() {
      Indicator.open("加载中...");
      var params = {
        memberId: this.memberId,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      cardDetail(params, a).then((res) => {
        if (res.data.code == 1) {
          this.name = res.data.data.member.name;
          this.info = res.data.data.member.info;
          this.content = res.data.data.member.content;
          this.specialList = res.data.data.specialList;
          this.price = res.data.data.member.price;
          this.isBuy = res.data.data.member.isBuy;
          this.imgUrl = res.data.data.member.cover;
          Indicator.close();
          this.wxInit();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    //微信授权登录
    Codeshare() {
      let appid = "wxc74ae6a677c8b11d";
      let redirect_uri = encodeURIComponent(
        `https://xcy.shuidongjia.net/#/Salesman/member?memberId=${this.$route.query.memberId}&id=${this.queryList.id}&branchId=${this.queryList.branchId}&roleCode=${this.queryList.roleCode}`
      );
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
    },
    //判断是安卓还是ios
    Phonetype() {
      let ua = navigator.userAgent;
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (!isiOS) {
        this.iosShow = true;
      }
    },
    //微信登录
    CodeH(codeVal) {
      let params = {
        code: codeVal,
        rc: this.$route.query.roleCode,
        ds: this.$route.query.id,
        branchId: this.$route.query.branchId,
      };
      params = querystring.stringify(params);
      codeh5(params).then((res) => {
        if (res.data.code == 1) {
          let href = window.location.href;
          let url = href.split("?code")[0];
          let sp1 = href.split("/?code=");
          var id = sp1[1].split("#")[1];
          var links = `${url}#${id}`;
          window.history.pushState({}, 0, links);
          localStorage.setItem("token", JSON.stringify(res.data.data.token));
          localStorage.setItem("user", JSON.stringify(res.data.data.user));
          this.cardDetail();
        } else {
          Toast(res.data.message);
        }
      });
    },
    getTime() {
      this.nowtime = Math.round(new Date().getTime() / 1000).toString();
    },
    randomString(len) {
      len = len || 32;
      var $chars =
        "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length;
      var pwd = "";
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      this.pwd = pwd;
    },
    //微信分享
    wxInit() {
      let that = this;
      let newUser = JSON.parse(localStorage.getItem("user"));
      let id = newUser.id;
      let branchId = newUser.branchId;
      let roleCode = newUser.roleCode;
      if (branchId == null) {
        branchId = 0;
      }
      var stateObject = {};
      let url = window.location.href.split("#")[0];
      let links = `${url}#/Salesman/member?memberId=${that.$route.query.memberId}&id=${id}&branchId=${branchId}&roleCode=${roleCode}`;
      if (location.toString().indexOf("?") == "-1") {
        links = window.location.href;
      } else {
      }
      window.history.pushState(stateObject, links);
      var params = {
        noncestr: that.pwd,
        timestamp: that.nowtime,
        url: links,
      };
      var params = querystring.stringify(params);
      Sdksig(params).then((res) => {
        if (res.data.code == 1) {
          that.signature = res.data.data.signature;
          console.log(that.name);
          console.log(that.imgUrl);
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "wxc74ae6a677c8b11d", // 必填，公众号的唯一标识
            timestamp: that.nowtime, // 必填，生成签名的时间戳
            nonceStr: that.pwd, // 必填，生成签名的随机串
            signature: that.signature, // 必填，签名
            jsApiList: [
              "onMenuShareTimeline", // 分享到朋友圈
              "onMenuShareAppMessage", // 分享到微信好友
              "onMenuShareQQ", // 分享到QQ
              "onMenuShareWeibo", // 分享到微博
              "onMenuShareQZone", // 分享到空间
              "hideMenuItems", // 批量隐藏菜单
              "scanQRCode",
              "translateVoice",
              "updateTimelineShareData",
            ], // 必填，需要使用的JS接口列表
          });
          //微信分享
          wx.ready(function () {
            //分享到朋友圈
            wx.onMenuShareTimeline({
              title: that.name, // 分享时的标题
              link: links, // 分享时的链接
              imgUrl: that.imgUrl, // 分享时的图标
              success: function () {
                Toast("分享成功");
              },
              cancel: function () {
                Toast("取消分享");
              },
            });
            //分享给朋友
            wx.onMenuShareAppMessage({
              title: that.name, // 分享时的标题
              link: links, // 分享时的链接
              imgUrl: that.imgUrl, // 分享时的图标
              success: function () {
                Toast("分享成功");
              },
              cancel: function () {
                Toast("取消分享");
              },
            });
          });
        } else {
          Toast(res.data.message);
        }
      });
    },
    //支付
    Paymoney() {
      let that = this;
      that.bus.$emit("loading", true); //开始
      let params = {
        price: that.price * 100,
        goodsId: that.id,
        payType: 2,
      };
      params = querystring.stringify(params);
      let a = localStorage.getItem("token");
      a = JSON.parse(a);
      Reqpay(params, a).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          Toast(res.data.message);
          that.bus.$emit("loading", false);
        } else {
          //根据prepayid调用bridge进行支付
          console.log(res.data.data.sign);
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: res.data.data.appId,
              //    //公众号名称，由商户传入
              timeStamp: res.data.data.timeStamp,
              //    //时间戳，自1970年以来的秒数
              nonceStr: res.data.data.nonceStr,
              paySign: res.data.data.sign,
              //    //随机串
              package: res.data.data.package,
              signType: res.data.data.signType,
            },
            function (res) {
              console.log(res);
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                that.cardDetail();
              } else {
                Toast("未知错误，交易中止");
              }
            }
          );
        }
        that.bus.$emit("loading", false); //结束
      });
    },
    tiao(item) {
      this.$router.push({
        path: "/Salesman/catalog",
        query: { columnId: item.columnId },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/* 会员卡介绍 */
.rich_text {
  color: #666666;
  font-size: 0.3rem;
  text-indent: 2em;
  padding: 0.2rem;
  img {
    width: 100%;
    height: auto;
  }
}
.mint-navbar .mint-tab-item.is-selected {
  color: #ffb400;
  border-bottom: none;
  font-size: 0.28rem;
}
.mint-navbar .mint-tab-item {
  flex: none;
  width: 1.5rem;
  font-size: 0.28rem;
  color: #666666;
}
.mint-navbar {
  border-bottom: 0.02rem solid #dddddd;
}
.mint-header {
  background: #ffffff;
  color: #333333;
}
.details {
  width: 100%;
  height: auto;
  padding-top: 40px;
  padding-bottom: 1rem;
}

.details_top {
  width: 100%;
  height: 1.7rem;
  position: relative;
  overflow: hidden;
}

.details_top .back {
  width: 100%;
  height: 1.7rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.details_nav {
  position: absolute;
  left: 0.31rem;
  bottom: 0.23rem;
  height: auto;
  display: flex;
  text-align: center;
}

.details_nav div:nth-of-type(1) {
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  overflow: hidden;
}

.details_nav div:nth-of-type(1) img {
  width: 0.82rem;
  height: 0.82rem;
}

.details_nav div:nth-of-type(2) {
  font-size: 0.4rem;
  color: #fff;
  margin-left: 0.23rem;
  margin-top: 0.15rem;
}

.details_oitem {
  width: 100%;
  height: auto;
}

.details_img {
  width: 100%;
  height: 4.58rem;
  box-sizing: border-box;
  border: 0.02rem dashed #9b9a9b;
}

.details_img img {
  width: 100%;
  height: auto;
  height: 100%;
}

.details_txt {
  width: 7.22rem;
  height: 1.09rem;
  min-height: 1rem;
  border-bottom: 0.02rem solid #ddd;
  line-height: 1.09rem;
  font-size: 0.34rem;
  color: #222;
  font-weight: bold;
  margin-left: 0.26rem;
}

.details_two {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-bottom: 0.2rem solid #eeeeee;
}

.details_two span:nth-child(1) {
  font-size: 0.34rem;
  color: #222222;
  margin-left: 0.28rem;
  display: inline-block;
  height: 0.8rem;
  line-height: 0.8rem;
  margin-top: 0.2rem;
}

.details_two span:nth-child(2) {
  display: block;
  width: 6.75rem;
  height: auto;
  font-size: 0.26rem;
  color: #666;
  line-height: 0.38rem;
  margin-left: 0.29rem;
  margin-top: 0.15rem;
  margin-bottom: 0.55rem;
}

.bottom {
  width: 100%;
  height: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
}
.bottom .subscription {
  width: 100%;
  height: 1rem;
  border: none;
  outline: none;
  background: #ffb400;
  display: flex;
  align-items: center;
  font-size: 0.34rem;
  padding: 0;
  border-radius: 0;
  color: #ffffff;
  justify-content: center;
}

.pop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.pop .pop_message {
  width: 6rem;
  height: 6.68rem;
  background: #fff;
  border-radius: 0.2rem;
}

.pop_message img {
  width: 5rem;
  height: 5rem;
  margin-left: 0.45rem;
  margin-top: 0.25rem;
}

.pop_message div {
  width: 5.5rem;
  margin-left: 0.75rem;
  height: 1rem;
  font-size: 0.28rem;
}
ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  li {
    width: 6.84rem;
    height: 1.4rem;
    box-sizing: border-box;
    border-radius: 0.16rem;
    border: 0.02rem solid #cfcfcf;
    margin-top: 0.28rem;
    display: flex;
    justify-content: space-between;
    .li_left {
      width: 5.12rem;
      height: 1.4rem;
      margin-left: 0.26rem;
      p:nth-child(1) {
        width: 100%;
        font-size: 0.26rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333333;
        margin-top: 0.3rem;
      }
      p:nth-child(2) {
        width: 100%;
        font-size: 0.24rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999999;
        margin-top: 0.1rem;
      }
    }
    img {
      width: 0.13rem;
      height: 0.23rem;
      margin-right: 0.31rem;
      margin-top: 0.59rem;
    }
  }
}
/deep/ .mint-tab-container-item .rich_text img {
  width: 100%;
  height: auto;
}
</style>